<template>
  <view class="page-body">
    <image class="bgimg x-col-center"
      :src="img+'images/20219/20210919104524637676883244561317.png'">
    </image>
    <!-- <view class="welcome">中灏管理程序</view> -->
    <view class="infos">
      <view class="iptRow x-row">
        <view class="img x-col-center">
          <image src="/static/loginicon1.png">
          </image>
        </view>
        <view class="iname x-col-center">
          手机号
        </view>
      </view>
      <view
        class="iptRow x-row bomrow borderBottom">
        <view class="img">
        </view>
        <input v-model="phone"
          placeholder="请输入您的手机号"
          class="iname x-col x-col-center"
          @confirm="gotoLogin" />
      </view>
      <view class="iptRow x-row">
        <view class="img x-col-center">
          <image src="/static/loginicon2.png">
          </image>
        </view>
        <view class="iname x-col-center">
          密码
        </view>
      </view>
      <view
        class="iptRow x-row bomrow borderBottom">
        <view class="img ">
        </view>
        <input password="true" v-model="pass"
          placeholder="请输入密码"
          class=" x-col-center x-col"
          @confirm="gotoLogin" />
      </view>
      <view class="el-bottom">
        <u-checkbox v-model="checked"
          shape="circle">
          <view class="x-row xyrow">
            <view class="read x-col-center">
              记住密码
            </view>
          </view>
        </u-checkbox>
      </view>
      <u-checkbox v-model="isTy">
        <view class="x-row xyrow">
          <view class="read x-col-center">
            阅读并同意
          </view>
          <view class="xieyi x-col-center"
            style="font-weight: 600;"
            @click.stop="showXy">
            《用户服务协议》
          </view>
        </view>
      </u-checkbox>
      <view class="" style="height:48rpx">
      </view>
      <u-button class="loginbtn"
        @click="gotoLogin" :ripple="true"
        type="primary">登 陆
      </u-button>
    </view>
    <u-select v-model="show" @confirm="confirm"
      title="选择登录身份" :list="list"></u-select>
	 
  </view>
</template>

<script>
export default {
  data() {
    return {
      checked: true,
      img: this.urlimg,
      phone: '',
      pass: '',
      show: false,
      list: [],
      capacity: '',
      active: '', // 页面来源，back 返回到上一个页面
      isTy: false,
      xyinfo: ''
    }
  },
  onLoad(e) {
    const phone = uni.getStorageSync('phone')
    const passwrod = uni.getStorageSync('password')
    if (phone) {
      this.phone = phone
    }
    if (passwrod) {
      this.pass = passwrod
      this.checked = true
    }
    // 如果有token 就直接去主页，测试时不用每次都登录
    if (uni.getStorageSync('token')) {
      uni.switchTab({
        url: 'tools'
      })
    }
  },
  methods: {
    showXy() {
      var that = this
      this.getXieyi()
    },
    isTyThis() {
      this.isTy = !this.isTy
    },
    getXieyi() {
      let that = this
      this.$axios('index/config', {}).then(res => {
        // that.xyinfo = ;
        getApp().globalData.bannerInfo = {
          title: '用户服务协议',
          content: res.result.agreement
        }
        that.$axios.navigateTo('content')
      })
    },
    confirm(e) {
      this.capacity = e[0].value
      this.capacitySelect()
    },
    getuser(token) {
      this.$axios('api/User/GetUserByToken', 'post', { Value: token }).then(res => {
        uni.setStorageSync('user_info', res.Value)
      })
    },
    gotoLogin() {
      var that = this
      if (!that.phone) {
        uni.showToast({
          title: '请输入您的手机号',
          icon: 'none'
        })
        return
      }
      if (!that.pass) {
        uni.showToast({
          title: '请输入密码',
          icon: 'none'
        })
        return
      }
      if (!that.isTy) {
        uni.showToast({
          title: '请阅读并同意用户服务协议',
          icon: 'none'
        })
        return
      }

      this.$axios('api/User/Login', 'post', {
        value: {
          LoginName: that.phone,
          PassWord: that.pass
        }
      }).then(res => {
        if (res.Success) {
          uni.showToast({
            title: '登录成功',
            duration: 1000
          })
          uni.setStorageSync('token', res.Value.Token)
          if (that.checked) {
            uni.setStorageSync('phone', that.phone)
            uni.setStorageSync('password', that.pass)
          } else {
            uni.removeStorageSync('phone')
            uni.removeStorageSync('password')
            that.phone = ''
            that.pass = ''
          }
          this.getuser(res.Value.Token)
          setTimeout(() => {
            uni.switchTab({
              url: '/pages/tools/tools'
            })
          }, 1000)
        } else {
          uni.showToast({
            title: res.Message,
            duration: 1000,
            icon: 'none'
          })
        }
      })
    },
    capacitySelect() {
      let that = this
      this.$axios('Login/capacity', {
        capacity: this.capacity
      }).then(res => {
        uni.setStorageSync('token', res.result.token)
        uni.setStorageSync('userType', that.capacity)
        if (that.active == 'back') {
          uni.navigateBack({
            delta: 1
          })
        } else {
          uni.setStorageSync('userTypeAry', that.list)
          uni.navigateTo({
            url: 'index?type=' + that.capacity
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.page-body {
  height: 100vh;
  background: #fff;
}
.welcome {
  text-align: center;
  position: fixed;
  margin-top: -30rpx;
  z-index: 9;
  width: 100%;
  top: 230rpx;
  font-size: 60rpx;
  font-weight: 600;
}
.xyrow {
  padding-left: 20rpx;
  .iconfont {
    font-size: 32rpx;
    margin-right: 10rpx;
  }
  .icondanxuanxuanzhong {
    color: #007aff;
  }
  .read,
  .xieyi {
    font-size: 28rpx;
    color: #666666;
  }
  .xieyi {
    text-decoration: underline;
  }
}
.infos {
  padding: 0 48rpx;
  box-sizing: border-box;
  position: relative;
  margin-top: -20rpx;
  .iptRow {
    padding-bottom: 32rpx;

    .img {
      width: 48rpx;
      height: 48rpx;
      margin-right: 12rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }
  }

  .bomrow {
    margin-bottom: 48rpx;
  }

  .loginbtn {
    .u-btn {
      width: 622rpx;
      height: 96rpx;
      background: #2b88fe;
      border-radius: 8rpx;
      margin: 0 auto;
      line-height: 96rpx;
      color: #ffffff;
      font-size: 36rpx;
    }
  }
}

.bgimg {
  display: block;
  width: 100%;
  height: 500rpx;
}
</style>
